<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>复选框实现全选、反选</title>
	<style>
		*{  margin: 0; padding: 0;}
		dl{ width: 130px; border: 1px solid #333; border-radius: 5px; text-align: center; margin: 20px auto; padding: 10px 20px; background: #f2f2f2; }
		dt{ line-height: 40px; border-bottom: 1px solid #333; text-align: left; }
		dd p{ line-height: 35px; }
		.info{ width: 475px; line-height: 2em; text-align: center; font-size: 12px; background: #f2f2f2; margin: 0 auto; }
	</style>
	<script>
		window.onload = function(){
			var checkAll = document.getElementById("checkAll");
			var checkReverse = document.getElementById("checkReverse");
			var input = document.getElementsByTagName("input");
			var label = document.getElementsByTagName("label")[0];

			function isCheckAll(){
				for( var i=1, n=0; i<input.length; i++ ){
					input[i].checked && n++;
				}
				input[0].checked = n == input.length-1;
				label.innerHTML = input[0].checked ? "全不选":"全选";

			}

			//全选/全不选
			checkAll.onclick = function(){
				for( var i=1; i<input.length; i++ ){
					input[i].checked = this.checked;
				}
				isCheckAll();
			}
			//反选
			checkReverse.onclick = function(){
				for( var i =1; i<input.length; i++ ){
					input[i].checked = !input[i].checked;
				}
				isCheckAll();
			}
			//根据复选个数更新全选框状态
			for( var i=1; i<input.length; i++ ){

				input[i].onclick = function(){
					isCheckAll();
				}
			}
		}
	</script>
</head>
<body>
	<dl>
		<dt>
			<input type="checkbox" id="checkAll">　<label>全选</label>　<a href="javascript:" id="checkReverse">反选</a></dt>
		<dd>
			<p><label><input type="checkbox" />　选项（一）</label></p>
	        <p><label><input type="checkbox" />　选项（二）</label></p>
	        <p><label><input type="checkbox" />　选项（三）</label></p>
	        <p><label><input type="checkbox" />　选项（四）</label></p>
	        <p><label><input type="checkbox" />　选项（五）</label></p>
	        <p><label><input type="checkbox" />　选项（六）</label></p>
	        <p><label><input type="checkbox" />　选项（七）</label></p>
	        <p><label><input type="checkbox" />　选项（八）</label></p>
	        <p><label><input type="checkbox" />　选项（九）</label></p>
	        <p><label><input type="checkbox" />　选项（十）</label></p>
		</dd>
	</dl>
	<div class="info">1、切换全选/全不选文字；2、根据选中个数更新全选框状态；</div>
</body>
</html>